import React,{ReactNode} from 'react';
import { connect } from 'react-redux';
import { CombinedState, CounterState } from '../store/reducers';
import * as actions from '@/store/actions/counterAction';
import { RouteComponentProps } from 'react-router-dom';
import { StaticContext} from 'react-router';
import { LocationDescriptorObject} from 'history'
import { TodosLocationState } from '@/components/Todos'

interface Params { name:string}
interface LocationState { }

type Props = CounterState&typeof actions& RouteComponentProps<Params, StaticContext,LocationState>


class Counter extends React.Component<Props>{
    render() {
        const { count,children ,match:{params},go} = this.props;
        let path: LocationDescriptorObject<TodosLocationState> = { pathname: "/todos", state: { name: 'todoName' } }
        return (
            <div>
                <p>名称:{params.name}</p>
                <p>{count}</p>
                <button onClick={()=>this.props.add()}>+</button>
                <button onClick={() => go(path)}>/todos</button>
            </div>
        )
    }
}


let mapStateToProps = function (state: CombinedState): CounterState {
    return state.counter;
}

export default connect(mapStateToProps, actions)(Counter);

// type PropsWithChildren<Props> = Readonly<Props> & Readonly<{
//     children?:React.ReactNode 
// }>
// type ComponentProps = PropsWithChildren<Props>

// type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;
// type ReactChild = ReactElement | ReactText;